<script setup lang="ts">
import { ref } from 'vue';

import { useVbenModal } from '@vben/common-ui';

const currContent = ref<string>('');
const currTitle = ref<string>('');
const [BasicModal, modalApi] = useVbenModal({
  fullscreenButton: false,
  showConfirmButton: false,
  cancelText: '关闭',
  onClosed: handleClosed,
  onOpenChange: async (isOpen) => {
    if (!isOpen) {
      return null;
    }
    modalApi.modalLoading(true);

    const { title, content } = modalApi.getData() as {
      content?: string;
      title?: string;
    };
    currTitle.value = title as string;
    currContent.value = content as string;
    modalApi.modalLoading(false);
  },
});

function handleClosed() {
  currContent.value = '';
  currTitle.value = '';
}
</script>

<template>
  <BasicModal :title="currTitle" class="w-[1000px]">
    <div class="min-h-[200px] bg-[#fff] p-4">
      <div class="h-full w-full" v-html="currContent"></div>
    </div>
  </BasicModal>
</template>
